<!--
 * @Author: lijilong
 * @Date: 2024-06-14 12:20:51
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-10-25 10:15:42
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<route lang="json5">
	{
        layout: 'default',
        style: {
            navigationBarTitleText: '需求反馈详情',
            enablePullDownRefresh: false,
            navigationStyle: 'custom',
        },
	}
</route>

<template>
    <page-meta :root-font-size="setting.rootFontSize"></page-meta>
    <view style="display: flex; height: 100vh; flex-direction: column; background-color: #f2f2f1">
        <view style="position: sticky; top: 0; z-index: 9999">
            <wd-navbar :title="isDetail ? '需求反馈详情' : '需求反馈编辑'" :bordered="false" safeAreaInsetTop>
                <template #left>
                    <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
                </template>
            </wd-navbar>
        </view>
        <view style="flex: 1; overflow-y: auto">
            <th-card title="需求单信息">
                <th-form>
                    <th-form-item label="项目名称" v-if="form.cusFlag == '0' && form.petitionName">
                        <text class="text">{{ form.petitionName }}</text>
                    </th-form-item>
                    <th-form-item label="需求产品名称">
                        <text v-text="form.invName"></text>
                    </th-form-item>
                    <th-form-item label="需求产品规格">
                        <text v-text="form.invStd"></text>
                    </th-form-item>
                    <th-form-item label="客户" v-if="form.cusFlag == '0'">
                        <text class="text">{{ form.cusName }}</text>
                    </th-form-item>
                    <th-form-item label="供应商" v-else>
                        <text class="text seq-no-text">{{ form.cusName }}</text>
                    </th-form-item>
                    <th-form-item label="业务员" v-if="form.cusFlag == '0'">
                        <text class="text">{{ form.personName }}</text>
                    </th-form-item>
                    <th-form-item label="需求描述">
                        <text class="text">{{ form.demandDesc }}</text>
                    </th-form-item>

                    <template v-if="showMoreDemand">
                        <th-form-item label="业务部门" v-if="form.cusFlag == '0'">
                            <text class="text">{{ form.deptName }}</text>
                        </th-form-item>
                        <th-form-item label="需求单号">
                            <text class="text">{{ form.demandCode }}</text>
                        </th-form-item>
                        <th-form-item label="用途">
                            <text class="text">{{ form.applicationType }}</text>
                        </th-form-item>
                        <th-form-item label="所属公司" v-if="form.cusFlag == '0'">
                            <text class="text">{{ form.tenantName }}</text>
                        </th-form-item>
                        <th-form-item label="样品验证目的" v-if="form.cusFlag != '0'">
                            <text class="text">{{ form.deptName }}</text>
                        </th-form-item>
                        <th-form-item label="要求完成时间">
                            <text class="text">{{ form.askCompleteTime }}</text>
                        </th-form-item>
                        <th-form-item label="是否给客户提供样品">
                            <text class="text">{{ form.requestFlag ? '是' : '否' }}</text>
                        </th-form-item>
                        <th-form-item label="是否外来样">
                            <text class="text">{{ form.sampleFlagName ? '是' : '否' }}</text>
                        </th-form-item>
                        <th-form-item label="年需求量/吨">
                            <text class="text">{{ form.invDemand }}</text>
                        </th-form-item>
                    </template>
                    <view class="exportModel" @click="showMoreDemand = !showMoreDemand">
                        <text>{{ showMoreDemand ? '收起' : '展开' }}</text>
                    </view>

                </th-form>
            </th-card>
            <th-card :title="form.taskType == 10 ? '研发终检报告' : form.taskType == 6 ? '复配终检报告' : '检验结论'">
                <th-table :columns="checkColumns" stripe multiple :dataList="form.checkList" :showHeaderCheckbox="false"
                    @checkChange="checkChange">
                    <template v-slot:viewFile="{ scope }">
                        <view v-if="scope.row.fileList?.length">
                            <view @click="previewFileHandle(item.url)" style="color:#2e5cf6"
                                v-for="(item, index) in scope.row.fileList">
                                {{ item.name }}
                            </view>
                        </view>
                        <view v-else>
                            <wd-button type="text" disabled>无报告</wd-button>
                        </view>
                    </template>
                </th-table>
            </th-card>

            <th-card title="回复信息">
                <text class="text" v-text="form.reply"
                    v-if="[2].includes(form.status) || [1].includes(form.closeStatus)"></text>
                <wd-textarea v-else v-model="form.reply" placeholder=" " clearable auto-height></wd-textarea>
                <!-- <wd-textarea show-word-limit v-model="form.reply" placeholder=" " clearable :maxlength="1200"
                    :disabled="[2].includes(form.status) || [1].includes(form.closeStatus)" class="diabledStyle"></wd-textarea> -->
                <!-- <th-form>
                    <th-form-item label="回复信息">
                        <wd-textarea type="textarea" auto-height v-model="form.reply" placeholder=" " clearable
                            style="width: 100%" no-border></wd-textarea>
                    </th-form-item>
                </th-form> -->
            </th-card>

            <th-card title="附件">
                <view v-if="!isDetail">
                    <wd-button type="text" @click="addfileList">插行</wd-button>
                    <wd-button type="text" style="margin-left: 10rpx" @click="rowDel">删行</wd-button>
                </view>

                <th-table :columns="columns" stripe multiple :dataList="form.rdReplyFileList">
                    <template v-slot:fileName="{ scope }">
                        <th-input v-model:value="scope.row.fileName" placeholder=" " border mode="textarea" clearable
                            autoHeight ref="remark"></th-input>
                    </template>
                    <template v-slot:remark="{ scope }">
                        <th-input v-model:value="scope.row.remark" placeholder=" " border mode="textarea" clearable
                            autoHeight ref="remark"></th-input>
                    </template>
                    <template v-slot:viewFile="{ scope }">
                        <text @click="previewFileHandle(scope.row.fileUrl)" style="color:#2e5cf6">
                            {{ scope.row.fileName }}
                        </text>
                    </template>
                    <template v-slot:action="{ scope }">
                        <uploadFile @complete="(ref) => uploadComplete(ref, scope)"></uploadFile>
                        <button size="mini" type="primary" @click="previewFileHandle(scope.row.fileUrl)"
                            v-if="scope.row.fileUrl">预览</button>
                    </template>
                </th-table>
            </th-card>
            <th-card title="审核信息" v-if="[1, 2, 3].includes(form.status)">
                <view class="row-list">
                    <view class="row" v-if="form.id && form.taskId">
                        <!-- <view class="label">审核意见</view> -->
                        <view class="value">
                            <view class="mb2 mt2">
                                <h5>审核意见</h5>
                            </view>
                            <wd-textarea type="textarea" v-model="comment" rows="6" placeholder="请输入审核意见"
                                style="border: 1px solid #f7f7f7"></wd-textarea>
                        </view>
                    </view>
                    <view>
                        <flowTable ref="flowDetailsTableRef" :processInstanceId="form.instanceId"></flowTable>
                    </view>
                </view>
            </th-card>
        </view>

        <view class="flow-btn-fixed" v-if="[0, 3].includes(form.status)">
            <view class="btn_group" style="width: 100%">
                <view class="btn danger" @click="handleSave"
                    v-if="checkPremiss('rdreply_edit') && [0].includes(form.closeStatus)">
                    <image src="../../../static/save.png" class="btn-icon"></image>
                    保存
                </view>
                <view class="btn primary" @click="handleSubmit"
                    v-if="checkPremiss('rdreply_submit') && [0].includes(form.closeStatus)">
                    <image src="../../../static/submit.png" class="btn-icon"></image>
                    提交
                </view>
                <view class="btn primary" @click="handleOpen"
                    v-if="[1].includes(form.closeStatus) && checkPremiss('rdreply_open')">
                    <wd-icon name="browse" size="26px"></wd-icon>
                    开启
                </view>
                <view class="btn primary" @click="onCloseShow"
                    v-if="[0].includes(form.closeStatus) && checkPremiss('rdreply_close')">
                    <wd-icon name="browse-off" size="26px"></wd-icon>
                    关闭
                </view>
            </view>
        </view>
        <view class="flow-btn-fixed" v-else>
            <view class="btn_group" style="width: 100%">
                <view class="btn primary" @click="onRevokeShow"
                    v-if="form.status == 1 && checkPremiss('rdreply_revoke') && [0].includes(form.closeStatus)">
                    <image src="../../../static/rovoke.png" class="btn-icon"></image>
                    撤回
                </view>
                <view class="btn danger" @click="oncomplete(1)"
                    v-if="form.taskId && form.status == 1 && checkPremiss('rdreply_agreed') && [0].includes(form.closeStatus)">
                    <image src="../../../static/reject.png" class="btn-icon"></image>
                    拒绝
                </view>
                <view class="btn primary" @click="oncomplete(0)"
                    v-if="form.taskId && form.status == 1 && checkPremiss('rdreply_agreed') && [0].includes(form.closeStatus)">
                    <image src="../../../static/tongyi.png" class="btn-icon"></image>
                    同意
                </view>
                <view class="btn primary" @click="onReviveShow()"
                    v-if="[2].includes(form.status) && checkPremiss('rdreply_abandon') && [0].includes(form.closeStatus)">
                    <image src="../../../static/rovoke1.png" class="btn-icon"></image>
                    弃审
                </view>
            </view>
        </view>

        <wd-popup v-model="closeShow" position="bottom" @close="handleClose">
            <view style="display: flex; flex-direction: column; height: 100%">
                <wd-textarea v-model="closeComment" placeholder="请填写关闭原因" no-border prop="closeComment"
                    class="reovke-textarea" />
                <view class="flow-btn-fixed">
                    <view class="btn_group" style="width: 100%">
                        <view class="btn danger" @click="handleClose">取消</view>
                        <view class="btn primary" @click="handleCloseForm">关闭</view>
                    </view>
                </view>
            </view>
        </wd-popup>

        <wd-popup v-model="revokeShow" position="bottom" @close="handleClose">
            <view style="display: flex; flex-direction: column; height: 100%">
                <wd-textarea v-model="revokeComment" placeholder="请填写撤回原因" no-border prop="revokeComment"
                    class="reovke-textarea" />
                <view class="flow-btn-fixed">
                    <view class="btn_group" style="width: 100%">
                        <view class="btn danger" @click="handleClose">取消</view>
                        <view class="btn primary" @click="onRevoke">确定</view>
                    </view>
                </view>
            </view>
        </wd-popup>
        <wd-popup v-model="reviveShow" position="bottom" @close="handleClose">
            <view style="display: flex; flex-direction: column; height: 100%">
                <wd-textarea v-model="reviveComment" placeholder="请填写弃审原因" no-border prop="reviveComment"
                    class="reovke-textarea" />
                <view class="flow-btn-fixed">
                    <view class="btn_group" style="width: 100%">
                        <view class="btn danger" @click="handleClose">取消</view>
                        <view class="btn primary" @click="onCancelApprover">弃审</view>
                    </view>
                </view>
            </view>
        </wd-popup>
    </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { getObj, complete, revokeProcess, abandon, putObj, addObj, open, close, submitProcess } from '@/service/reply';
import thTable from '../experiment/record/component/demo/th-table.vue';
import { computed } from 'vue';
import { useUserStore } from '@/stores/user';
import thInput from '../assay-report/component/th-input.vue';
import showModal from '@/utils/modal';

const userStore = useUserStore();

const setting = useSetting();
const showMoreDemand = ref(false)
// 提交表单数据
const form: any = reactive({
    id: null,
    taskType: '',
    rdReplyFileList: [],
    checkList: []
});

const isDetail = computed(() => {
    return [1, 2].includes(form.status) || [1].includes(form.closeStatus)
})


const checkAllColumns = ref([
    { label: '', type: 'selection', align: 'center', width: 50, fixed: true },
    { label: '分析手段', prop: 'analysisName', align: 'center', width: 80 },
    { label: '检验指标', prop: 'itemName', align: 'center', width: 80 },
    { label: 'U8指标', prop: 'erpValuePm', align: 'center', width: 80 },
    { label: '客户指标', prop: 'standardValuePm', align: 'center', width: 80 },
    { label: '检测值', prop: 'itemValue', align: 'center', width: 80 },
    { label: '单位', prop: 'unit', align: 'center', width: 80 },
    { label: '报告', render: 'viewFile', align: 'center', width: 200 },
])

const checkColumns = computed(() => {

    // 没有客户指标
    if (form.id && form.showCustomerValue != 1) {
        const colIndex = checkAllColumns.value.findIndex(item => item.label == '客户指标')
        if (colIndex > -1) checkAllColumns.value.splice(colIndex, 1)
    }

    //没有u8指标
    if (form.id && form.showErpValue != 1) {
        const colIndex = checkAllColumns.value.findIndex(item => item.label == 'U8指标')
        if (colIndex > -1) checkAllColumns.value.splice(colIndex, 1)
    }

    // 审核 或者 审核中
    // if ([2].includes(form.status) || [1].includes(form.closeStatus)) {
    //     checkAllColumns.value.splice(0, 1)
    // }
    //默认
    return checkAllColumns.value
})

const columns = computed(() => {
    if (isDetail.value) {
        return [
            { label: '', type: 'selection', align: 'center', width: 50, fixed: true },
            { label: '附件名称', prop: 'fileName', render: 'viewFile', align: 'center', width: 200 },
            { label: '附件描述', prop: 'remark', align: 'center', width: 200 },
        ]
    }
    return [
        { label: '', type: 'selection', align: 'center', width: 50, fixed: true },
        { label: '附件名称', prop: 'fileName', render: 'fileName', align: 'center', width: 200 },
        { label: '附件描述', prop: 'remark', render: 'remark', align: 'center', width: 200 },

        {
            label: '操作',
            type: 'action',
            align: 'center',
            render: 'action',
            width: 120,
            fixed: 'right',
        },
    ]
})

const flowDetailsTableRef = ref();
const init = (params) => {
    uni.$off('pm-requirement-sign');
    uni.showLoading();
    getObj(params.id)
        .then((res) => {
            res.data.rdReplyFileList = res.data.rdReplyFileList?.map(item => {
                item.checked = item.checkFlag
                return item
            }) || []
            res.data.checkList = res.data.checkList?.map(item => {
                item.checked = item.checkFlag
                return item
            }) || []
            Object.assign(form, res.data);

            nextTick(() => {
                flowDetailsTableRef.value?.getFlowDetails();
            });
        })
        .finally(() => {
            uni.stopPullDownRefresh();
            uni.hideLoading();
        });
    // checkPost();
};


onLoad((options) => {
    if (options) {
        const id = options.id;
        init({
            id: id,
        });
    }

});
onPullDownRefresh(() => {
    init({
        id: form.id,
    });
});

const goBack = () => {
    uni.navigateBack();
};

const previewFileHandle = (file) => {
    if (!file) return;
    uni.navigateTo({
        url: '/pages/pm/preview-online?url=' + file,
    });
};

const uploadComplete = (ref, paylod) => {
    const { url, fileName, } = ref;
    paylod.row.fileUrl = url;
    paylod.row.fileName = fileName;
}

const checkPremiss = (k) => {
    return userStore.userInfos.authBtnList.some((v: string) => v === k);
};


// const checkChangeAll = (allSelection) => {
//     if (allSelection.length > 0) {
//         allSelection.map(row => {
//             checkChange({ row, selection: allSelection })
//         })
//     }

// }

const checkChange = ({ row, selection }) => {
    if (row.checked == false) {
        let reportCode = "";
        let codeList = [];
        selection.forEach(element => {
            if (reportCode != element.reportCode) {
                codeList.push(element.reportCode)
                reportCode = element.reportCode
            }
        });
        if (codeList && codeList.length == 1 && row.editFlag == 0) {
            let rowIndex = form.checkList.findIndex(item => item.id == row.id)

            rowIndex > -1 ? form.checkList[rowIndex].checked = true : null
            return uni.showToast({
                title: '需求单检验指标无法取消选择',
                icon: 'none',
                mask: true,
            });
        }
    } else {
        let distinctList = selection.filter((record) => record.analysisName == row.analysisName && record.itemName == row.itemName);
        if (distinctList && distinctList.length > 1) {
            form.checkList.forEach(item => {

                if (distinctList.some(v => v.id == item.id)) {
                    item.checked = false
                }

            })

            return uni.showToast({
                title: '相同分析手段、指标的数据只能选择一条',
                icon: 'none',
                mask: true,
            });

        }


        // 分析手段 && 检验指标 && 不是当前选中行
        // const filter = selection.filter(item => item.analysisName == row.analysisName && item.itemName == row.itemName && item.id != row.id);

        // form.checkList.forEach(item => {

        //     if (filter.some(v => v.id == item.id)) {
        //         item.checked = false
        //     }

        // })
    }



}


const addfileList = () => {
    form.rdReplyFileList.push({
        fileName: '',
        fileUrl: '',
    });
};
const rowDel = () => {
    form.rdReplyFileList = form.rdReplyFileList.filter(item => !item.checked)
};


const getParams = () => {
    // form.rdReplyFileList = form.rdReplyFileList?.map(item => {
    //     item.checkFlag = item.checked
    //     return item
    // })
    form.checkList = form.checkList?.map(item => {
        item.checkFlag = item.checked
        return item
    })
}

/**
 * 保存
 */
const handleSave = async function () {
    uni.showLoading({
        mask: true,
    });
    getParams()
    if (!form.reply || form.reply == null) {
        return uni.showToast({
            mask: true,
            title: `回复信息必填`,
            icon: 'none',

        });
    }

    //校验客户指标数据
    if ((form.status == 0 || form.status == 3) && form.checkList && form.checkList.length > 0) {

        const records = form.checkList;
        console.log(records);
        let reportCode = "";
        let codeList = [];
        records.forEach(e => {
            if (reportCode != e.reportCode) {
                codeList.push(e.reportCode)
                reportCode = e.reportCode
            }
        });
        if (codeList && codeList.length > 1) {
            //多个单据
            let distinctList = records.filter((record) => record.editFlag == 0);
            //必须勾选的指标数据集合
            let checkDataList = [];
            if (distinctList && distinctList.length > 1) {
                distinctList.forEach(element => {
                    if (checkDataList.length == 0) {
                        checkDataList.push({
                            selectFlag: false,
                            ...element
                        });
                    } else {
                        let rowsList = checkDataList.filter((check) => check.itemName == element.itemName);
                        if (!(rowsList && rowsList.length == 1)) {
                            checkDataList.push({
                                selectFlag: false,
                                ...element
                            });
                        }
                    }
                });
            }
            //已勾选的数据
            let checkList = form.checkList.filter(item => item.checked);
            if (checkList && checkList.length > 0) {
                checkList.forEach((element) => {
                    let existsList = checkDataList.filter((check) => check.itemName == element.itemName);
                    console.log(existsList)
                    if (existsList && existsList.length > 0) {
                        existsList[0].selectFlag = true;
                    }
                })
            }
            let notSelect = checkDataList.filter((check) => check.selectFlag == false);
            if (notSelect && notSelect.length > 0) {
                let description = '';

                notSelect.forEach(a => {
                    description += `${a.itemName}\n`
                })
                description += '未选择，请选择一项'
                return uni.showModal({
                    title: '提示',
                    content: description,
                    showCancel: false,
                    success: () => {
                        uni.hideLoading()
                    }
                })

                // return notification.error({
                //     message: '提示',
                //     // description: (description),
                //     description:
                //         h("div", null, [
                //             h("p", { innerHTML: description }, null),
                //         ]),
                //     placement: 'bottomRight',
                // });
            }

        }
    }





    try {
        let res;
        if (form.id) {
            res = await putObj(form);
        } else {
            res = await addObj(form);
        }
        if (res.code === 0) {
            uni.showToast({
                mask: true,
                title: `保存成功`,
                icon: 'none',
            });

            init({ id: form.id });
        } else {
            uni.showToast({
                mask: true,
                title: res.msg,
                icon: 'none',
            });
        }
    } catch (err) {
        uni.showToast({
            mask: true,
            title: err.msg || err.message || '保存失败',
            icon: 'none',
        });
    }
};

/**
 * 提交
 */
const handleSubmit = async () => {
    showModal({
        title: '提示',
        content: '是否提交该单据',
        showCancel: true,
        confirm: async () => {
            uni.showLoading({
                mask: true,
            });
            getParams()
            const resSave = await putObj(form);
            if (resSave.code == 0) {
                try {
                    const res = await submitProcess(form);
                    if (res.code !== 0) {
                        return uni.showToast({
                            mask: true,
                            title: res.msg,
                            icon: 'none',
                        });
                    }

                    uni.showToast({
                        mask: true,
                        title: res.msg || '操作成功',
                        icon: 'none',
                    });
                    init({
                        id: form.id,
                    });

                } catch (error) {
                    uni.showToast({
                        mask: true,
                        title: error.msg || error.message || '操作失败',
                        icon: 'none',
                    });
                }
            }
        }
    })
    // try {
    //     const res = await submitProcess(form);
    //     if (res.code === 0) {
    //         return uni.showToast({
    //             mask: true,
    //             title: res.msg,
    //             icon: 'none',
    //         });
    //     }

    //     uni.showToast({
    //         mask: true,
    //         title: res.msg || '操作成功',
    //         icon: 'none',
    //     });
    //     init({
    //         id: form.id,
    //     });
    // } catch (error) {
    //     uni.showToast({
    //         mask: true,
    //         title: error.msg || error.message || '操作失败',
    //         icon: 'none',
    //     });
    // }
}



// 审核信息
const comment = ref('');
const oncomplete = (type) => {
    if (type == '1' && !comment.value) {
        uni.showToast({
            title: '请填写审核意见',
            icon: 'none',
            mask: true,
        });
        return;
    }

    const params: any = {
        taskId: form.taskId,
        comment: comment.value,
        id: form.id,
        approve: type == 0 ? true : false,
        reply: form.reply
    };

    if (type == 0) {
        params.rdReplyFileList = form.rdReplyFileList?.map(item => {
            item.checkFlag = item.checked
            return item
        })

        params.checkList = form.checkList?.map(item => {
            item.checkFlag = item.checked
            return item
        })
    }


    uni.showLoading({
        mask: true,
    });



    complete(params, form.id)
        .then((res) => {
            if (res.code == 0) {
                uni.showToast({
                    title: '单据审核成功',
                    icon: 'none',
                    mask: true,
                });
                init({
                    id: form.id,
                });
            } else {
                uni.showToast({
                    mask: true,
                    title: `单据审核失败，失败原因：${res.msg}`,
                    icon: 'none',
                });
            }
        })
        .finally(() => {
            uni.hideLoading();
        });
};



// 撤回
const revokeComment = ref('');
const revokeShow = ref(false);

const onRevokeShow = () => {
    revokeShow.value = true;
};
const handleClose = () => {
    revokeShow.value = false;
    reviveShow.value = false;
    closeShow.value = false

};
const onRevoke = () => {
    showModal({
        title: '提示',
        content: '是否撤回该单据',
        showCancel: true,
        confirm: () => {
            uni.showLoading({
                mask: true,
            });
            revokeProcess({
                id: form.id,
                instanceId: form.instanceId,
                comment: revokeComment.value,
            })
                .then((res) => {
                    if (res.code == 0) {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.replyCode}撤回成功`,
                            icon: 'none',
                        });
                        handleClose();
                        init({ id: form.id });
                    } else {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.replyCode}撤回失败，失败原因：${res.msg}`,
                            icon: 'none',
                        });
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    });
};



// 弃审
const reviveComment = ref('');
const reviveShow = ref(false);

const onReviveShow = () => {
    reviveShow.value = true;
};

const onCancelApprover = () => {
    showModal({
        title: '提示',
        content: '是否弃审该单据',
        showCancel: true,
        confirm: () => {
            uni.showLoading({
                mask: true,
            });
            abandon({
                id: form.id,
                comment: revokeComment.value,
            })
                .then((res) => {
                    if (res.code == 0) {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.replyCode}弃审成功`,
                            icon: 'none',
                        });
                        handleClose();
                        init({ id: form.id });

                    } else {
                        uni.showToast({
                            mask: true,
                            title: `单据${form.replyCode}弃审失败，失败原因：${res.msg}`,
                            icon: 'none',
                        });
                    }
                })
                .finally(() => {
                    uni.hideLoading();
                });
        },
    });
};



const handleOpen = () => {
    uni.showLoading({
        mask: true,
    });
    open(form.id).then(res => {
        if (res.code != 0) {
            return uni.showToast({
                mask: true,
                title: `单据${form.replyCode}开启失败，启原因：${res.msg}`,
                icon: 'none',
            });
        }
        init({ id: form.id });
    })
}


// 关闭
const closeComment = ref('');
const closeShow = ref(false);
const onCloseShow = () => {
    closeShow.value = true;
};

const handleCloseForm = () => {
    if (!closeComment.value) return uni.showToast({
        mask: true,
        title: `填写关闭`,
        icon: 'none',
    });
    uni.showLoading({
        mask: true,
    });
    close({
        id: form.id,
        comment: closeComment.value,
    }).then(res => {
        if (res.code != 0) {
            return uni.showToast({
                mask: true,
                title: `单据${form.replyCode}关闭失败，启原因：${res.msg}`,
                icon: 'none',
            });
        }
        closeComment.value = ""
        handleClose();
        init({ id: form.id });
    })
}
</script>

<style lang="scss" scoped>
// @import "../experiment/components/table.scss";

.block .content {
    padding: 0 !important;
}

.card-detail {
    padding: 0 !important;
}

.wd-cell {
    padding-left: 0 !important;
}

.wd-card__title {
    border-left: 4px solid #2e5cf6 !important;
}


:deep(.label) {
    width: 160rpx !important;
}

.viewTable {
    flex: auto;

    :deep() {
        .content {
            width: calc(100% - 80px);
        }
    }
}

.diabledStyle {
    :deep() {
        .wd-textarea__inner {
            color: #262626 !important;
        }
    }
}

:deep() {
    .wd-textarea {
        &::after {
            display: none !important;
        }
    }
}

.result-tag {
    padding: 6rpx 14rpx;
    margin: 2rpx 0;
    font-size: 24rpx;
    color: white;
    background-color: #87d068;
    border-radius: 4rpx;
}

.flow-btn-fixed {
    width: 100%;
    background-color: white;
    border-top: 1px solid #f2f2f1;
}

.exportModel {
    width: 100%;
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #409eff;
    text-align: center;
}

:deep() {
    .th-table {
        max-height: 300px;
    }
}

.btn_group {
    display: flex;
    justify-content: space-between;

    // margin: 0rpx 0 20rpx;
    // border-bottom: 1px solid #f2f2f1;

    .btn {
        display: flex;

        // width: 49%;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        // height: 40px;
        min-height: 40px;
        padding: 10rpx 0;
        font-size: 24rpx;
        color: black;

        // background-color: white !important;
        background-color: #dbecff !important;
        border-left: 1px solid #f7f7f7;
        border-radius: 0 !important;

        // color: white;
        border-radius: 6rpx;

        .btn-icon {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 8rpx;
        }
    }

    .danger {
        background-color: #f56c6c;
    }

    .primary {
        background-color: #409eff;
    }
}
</style>